<template>
	<view class="home">
		<view class="text-32 text-bold">桌游</view>
		<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-20">
			<view class="flex">
				<view class="text-28 text-66">门店名</view>
				<view class="flex-one text-right text-28">{{detail.shop_name}}</view>
			</view>
			<view class="flex margin-top-30">
				<view class="text-28 text-66">包间/大厅</view>
				<view class="flex-one text-right text-28">{{detail.room_name}}</view>
			</view>
			<view class="flex margin-top-30">
				<view class="text-28 text-66">桌游</view>
				<view class="flex-one text-right text-28">{{detail.theme}}</view>
			</view>
			<view class="flex margin-top-30">
				<view class="text-28 text-66">预约时间</view>
				<view class="flex-one text-right text-28">{{detail.join_method}}</view>
			</view>
			<view class="text-right text-28">{{detail.reservations_time}}</view>
			<view class="flex align-center justify-center">
				<view class="yjbtn">￥{{detail.play_money}}/人/小时</view>
			</view>
			<view class="flex margin-top-30">
				<view class="text-28 text-66">预约电话</view>
				<view class="flex-one text-right text-28">{{detail.reservations_phone}}</view>
			</view>
		</view>
		<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40">
			<view class="flex align-center">
				<view class="text-28 flex-one text-66">号码编号</view>
				<view class="text-28">{{code}} <text v-if="detail.is_my==1">（自己）</text></view> 
				<image :src="detail.avatar" mode="" class="headimg"></image>
				<view class="text-28">{{detail.nickname}}</view>
			</view>
			<view class="flex margin-top-30">
				<view class="text-28 text-66">游戏时长</view>
				<view class="flex-one text-right text-28">{{detail.time_long}}</view>
			</view>
			<view class="text-right text-28">{{detail.reservations_time}}</view>
			<view class="flex margin-top-30 padding-bottom-30 border-bottom-f7">
				<view class="text-28 text-66">费用</view>
				<view class="flex-one text-right text-28">￥{{detail.ywmoney}}</view>
			</view>
			<view class="flex align-center margin-top-30">
				<view class="text-28 flex-one text-right">
					小计： <text class="text-red">￥{{detail.ywmoney}}</text>
				</view>
			</view>
		</view>
		<view class="text-32 text-bold margin-top-40">点单</view>
		<view class="padding-25 bg-ff bg-shadow radius-40 margin-top-20">
			<view class="flex margin-bottom-25 border-bottom-f7 padding-bottom-40"
				v-for="(item,index) in detail.goodinfo" :key="index">
				<image :src="item.goodimage" mode="" class="listimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-28 height-60 line-30 text-cut-two">{{item.goodname}}</view>
					<view class="flex align-center margin-top-40">
						<view class="text-red text-28 flex-one">￥{{item.price}}</view>
						<view class="text-28 text-red">x{{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="text-28 text-right margin-top-25">
				小计： <text class="text-red">￥{{detail.goodmoeny}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				detail: "",
				code:""
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			this.getDetail()
			this.rq.getData('shop/light_code', {
				light_id: uni.getStorageSync('store_id')
			}).then(res => {
				if (res.code == 1) {
					this.code = res.data.code
				}
			})
		},
		methods: {
			getDetail() {
				this.rq.getData('order/order_detail', {
					id: this.id,
					type: 2,
					daifu:1
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}
	.listimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}
	.headimg{
		width: 78rpx;
		height: 78rpx;
		border-radius: 50%;
		margin: 0 8rpx;
	}
</style>